{% extends "layouts/base.volt" %}

{% block title %}Login{% endblock %}

{% block headEnd %}
    <style type="text/css">
        html, body {
            height: 100%
        }

        .login-panel {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            margin-top: -150px;
            margin-left: -150px;
        }
    </style>
{% endblock %}

{% block pageEnd %}
    <script src="//cdn.bootcss.com/layer/2.4/layer.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form_login').on('submit', function () {
                var account = $('#account').val();
                var password = $('#password').val();
                if (!account) {
                    layer.alert('Account cannot be empty!', function (index) {
                        layer.close(index);
                        $('#account').focus();
                    });
                    return false;
                }
                if (!password) {
                    layer.alert('Password cannot be empty!', function (index) {
                        layer.close(index);
                        $('#password').focus();
                    });
                    return false;
                }
                var layerIndex = layer.load();
                $.post($(this).attr('action'), {account: account, password: password}, function (data) {
                    console.log(data);
                    layer.close(layerIndex);
                    if(data.result.success == 1) {
                        location.href = '{{ url('') }}';
                        return;
                    }
                    layer.alert(data.errmsg);
                }, 'json');
                return false;
            });
        });
    </script>
{% endblock %}

{% block content %}
    <div class="login-panel panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Login</h3>
        </div>
        <div class="panel-body">
            <form id="form_login" action="{{ url('shorturl/login') }}" role="form" method="post">
                <fieldset>
                    <div class="form-group">
                        <input class="form-control" placeholder="Account" name="account" id="account" type="text"
                               autofocus>
                    </div>
                    <div class="form-group">
                        <input class="form-control" placeholder="Password" name="password" id="password"
                               type="password">
                    </div>
                    <button class="btn btn-lg btn-success btn-block" type="submit">Login</button>
                </fieldset>
            </form>
        </div>
    </div>
{% endblock %}